<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
});
const { isDark } = useDark();
// const initData = ref(props?.data);
const initData = Object.entries(props?.data?.task_type_totals).map(([id, item]) => ({ id, ...item }))
const theme = computed(() => (isDark.value ? "dark" : "light"));

const pieChartRef = ref();

let type2 = 0
let type7 = 0
let type11 = 0
let type12 = 0
for (let item of initData ?? []) {
  if(item) {
    if(item.name === '预收款'){
      type2 = item.total
    }
    if(item.name === '发货款'){
      type7 = item.total
    }
    if(item.name === '验收款'){
      type11 = item.total
    }
    if(item.name === '质保金'){
      type12 = item.total
    }
  }
}

const { setOptions } = useECharts(pieChartRef, {
  theme
});
const initChart = () => {
  setOptions({
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "0%"
    },
    series: [
      {
        name: "收款统计",
        type: "pie",
        top: "2%",
        radius: "75%",
        center: ["50%", "50%"],
        color: ["#FFCE34", "#65B581", "#53a7ff", "#7a80b4"],
        data: [
          { value: type2, name: "预收款(元)" },
          { value: type7, name: "发货款(元)" },
          { value: type11, name: "验收款(元)" },
          { value: type12, name: "质保金(元)" },
        ]
      }
    ]
  });
}

onMounted(initChart);

</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 391px" />

</template>
